<template>
  <van-popup v-model:show="commonStore.menuShow" class="side-bar" position="right">
    <div class="box-left">
      <div class="header-name">
        <Logo />
        <div class="close" @click="() => commonStore.menuShow = false">
          <van-icon name="cross" />
        </div>
      </div>
      <ul class="header-menu">
        <li v-for="item in list" :key="item.title" :class="{on: item.title == active}" @click="handleEvent(item)" @mousedown="mousedown">
          <div class="item">
            <img :src="item.img" v-if="item.title == active"/>
            <img :src="item.imgActive" v-else/>
             {{$t( item.title )}} 
          </div>
        </li>
      </ul>
    </div>
  </van-popup>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
import { getCommonStore } from '../../stores/common';
import Logo from '../Logo/index.vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const router = useRouter()

const commonStore = getCommonStore()

const active = ref('首页')
const list = reactive([
  {
    title: 'meg.menu.home',
    img: new URL('../../assets/imgs/home-white.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/home-black.png', import.meta.url).href,
    router: 'home'
  },
  {
    title: 'meg.menu.invitationCode',
    img: new URL('../../assets/imgs/world.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/world.png', import.meta.url).href,
    router: '/invitationCode'
  },
  {
    title: 'meg.menu.team',
    img: new URL('../../assets/imgs/team-white.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/team-black.png', import.meta.url).href,
    router: '/team'
  },
  {
    title: 'meg.menu.property',
    img: new URL('../../assets/imgs/property-white.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/property-black.png', import.meta.url).href,
    router: '/property'
  },
  {
    title: 'meg.menu.subscriptionRecord',
    img: new URL('../../assets/imgs/world.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/world.png', import.meta.url).href,
    router: '/subscriptionRecord'
  },
  {
    title: 'meg.menu.revenueDetails',
    img: new URL('../../assets/imgs/property-white.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/property-black.png', import.meta.url).href,
    router: '/revenueDetails'
  },
  {
    title: 'meg.menu.pledge',
    img: new URL('../../assets/imgs/property-white.png', import.meta.url).href,
    imgActive: new URL('../../assets/imgs/property-black.png', import.meta.url).href,
    router: '/pledge'
  },
])

const handleEvent = (item) => {
  active.value = item.title
  if(item.router == 'home'){
    commonStore.menuShow = false
    return
  }
  item.router && router.push({
    path: item.router
  })
}

const mousedown = () => {
  console.log('1')
}
</script>

<style scoped lang='scss'>
.box-left {
  .header-name {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    height: 3.375rem;
    padding: 0.4688rem 0.625rem;
    .close {
      cursor: pointer;
      font-size: 1rem;
    }
  }
  .header-menu {
    border-top: 1px solid rgb(134, 138, 174);
    padding: 0 0.625rem;
    .item {
      padding: 0 0.9375rem;
      border-radius: 0.625rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
      height: 3.125rem;
      font-size: 0.8375rem;
      position: relative;
      cursor: pointer;
      img {
        margin-right: 0.625rem;
      }
    }
    li {
      padding: 0.3125rem 0;
      &.on {
        .item {
          // background-color: #7e7e7e;
          color: rgb(255, 173, 79);
        }
      }
    }
  }
}
</style>

<style lang='scss'>
.side-bar {
  height: 100vh;
  width: 60%;
  background: linear-gradient(198.17deg, rgba(40, 40, 68, 0.9) 0%, rgb(20, 22, 30) 71.33%);
}
</style>